<template>
  <div class="main">
    <div class="air-column">
      <h2>乘机人</h2>
      <el-form class="member-info" :model="{user}" ref="meberForm">
        <div class="member-info-item" v-for="(user, index) in user" :key="index">
          <el-form-item
            class="username"
            label="乘机人姓名"
            :prop="`user[${index}].username`"
            :rules="{
                        required: true, message: '乘机人姓名不能为空', trigger: 'blur'
                            }"
          >
            <el-input placeholder="姓名" class="input-with-select" v-model="user.username"></el-input>
          </el-form-item>

          <el-form-item
            class="number"
            label="证件类型"
            :prop="`user[${index}].number`"
            :rules="[{ required: true, message: '身份证号码不能为空', trigger: 'blur'},
           {min: 10, max: 15, message: '长度在 10 到 15 个字符', trigger: 'blur'} ]
            "
          >
            <el-input placeholder="身份证件号码" class="input-with-select" v-model="user.number"></el-input>
          </el-form-item>

          <span class="delete-user" @click="handleDeleteUser(index)">-</span>
        </div>
      </el-form>

      <el-button class="add-member" type="primary" @click="handleAddUsers">添加乘机人</el-button>
    </div>

    <div class="air-column">
      <h2>保险</h2>
      <div>
        <el-checkbox-group v-model="checkList">
          <div v-for="(item, index) in dataList.insurances " :key="index" class="insurance-item">
            <el-checkbox
              :label="item.id"
            >{{item.type}}：￥{{item.price}}/份×{{user.length}} 最高赔付{{item.compensation}}</el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
    </div>

    <div class="air-column">
      <h2>联系人</h2>
      <div class="contact">
        <el-form label-width="60px" ref="contForm">
          <el-form-item label="姓名">
            <el-input v-model="contactName"></el-input>
          </el-form-item>

          <el-form-item label="手机">
            <el-input placeholder="请输入内容" v-model="contactphone">
              <template slot="append">
                <el-button @click="handleSendCaptcha">发送验证码</el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="验证码">
            <el-input v-model="captcha"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="warning" class="submit" @click="handleSubmit('meberForm','contForm')">提交订单</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataList: Object
  },
  data() {
    return {
      user: [
        {
          username: "",
          number: ""
        }
      ],
      checkList: [], //保险数据
      contactName: "", //联系人名字
      contactphone: "", //联系人电话
      captcha: "", //验证码
      invoice: false, //发票
      code: "" //判断验证码是否正确
    };
  },
  //监听乘机人和保险的变化
  watch: {
    user: {
      handler() {
        this.totalPrice();
      },
      // deep: true,
      immediate: true
    },
    checkList: {
      handler() {
        this.totalPrice();
      },
      immediate: true
    }
  },
  mounted() {
    console.log(this.dataList.insurances);
  },
  methods: {
    // 计算总人数的价格
    totalPrice() {
      console.log(this.dataList.insurances);
      let res = 0;
      res += this.dataList.base_price + 50 * this.user.length;

      this.dataList.insurances.forEach(el => {
        if (this.checkList.indexOf(el.id) >= 0) {
          res += el.price * this.user.length;
        }
      });
      this.$emit("setTotal", { res, Total: this.user.length });
    },

    // 添加乘机人
    handleAddUsers() {
      // console.log(123);
      this.user.push({
        username: "",
        number: ""
      });
      console.log(this.user);
    },

    // 移除乘机人
    handleDeleteUser(index) {
      this.user.splice(index, 1);
    },

    // 发送手机验证码
    handleSendCaptcha() {
      if (this.contactphone == "") {
        this.$message.error("请输入手机号码");
        return;
      }
      if (this.contactphone.length != 11) {
        this.$message({
          message: "请输入正确的手机号码",
          type: "warning"
        });
        return;
      }
      this.$axios({
        url: "/captchas",
        method: "post",
        data: {
          tel: this.contactphone
        }
      }).then(res => {
        this.$message({
          message: "获取成功，验证码是：" + res.data.code,
          type: "success"
        });
        this.code = res.data.code;
      });
    },

    // 提交订单
    handleSubmit(meberForm, contForm) {
      //拼接数据
      const data = {
        seat_xid: this.$route.query.seat,
        air: this.$route.query.data,
        users: this.user,
        insurances: this.checkList,
        contactName: this.contactName,
        contactPhone: this.contactphone,
        captcha: this.captcha,
        invoice: this.invoice
      };
      //判断验证码
      if (this.captcha != this.code || this.captcha == "") {
        this.$message.error("验证码错误请重新获取");
        return;
      }

      //提交数据
      this.$axios({
        url: `/airorders`,
        method: "post",
        data: data,
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userInfo.token
        }
      }).then(res => {
        const loading = this.$loading({
          lock: true,
          text: "拼命加载中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        setTimeout(() => {
          loading.close();
          this.$notify({
            title: "恭喜",
            message: "下单成功",
            type: "success"
          });
          let id = this.dataList.id;
          this.$router.push({
            path: "/air/pay?id=" + res.data.data.id
          });
        }, 2000);
      });
    }
  }
};
</script>

<style scoped lang="less">
.air-column {
  border-bottom: 1px #ddd dashed;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.air-column h2 {
  margin-bottom: 30px;
  font-size: 22px;
  font-weight: normal;
}

/deep/ .el-select .el-input {
  width: 130px;
}

.input-with-select {
  width: 590px;
}

.input-with-select /deep/ .el-input-group__prepend {
  background-color: #fff;
}
.member-info /deep/ .el-form-item {
  margin-bottom: 0;
}

.member-info-item {
  border-bottom: 1px #eee dashed;
  padding-bottom: 30px;
  position: relative;

  &:first-child {
    .delete-user {
      display: none;
    }
  }
}

.add-member {
  margin-top: 20px;
}

.delete-user {
  display: block;
  background: #ddd;
  width: 16px;
  height: 16px;
  font-size: 14px;
  text-align: center;
  line-height: 16px;
  color: #fff;
  cursor: pointer;
  border-radius: 50px;
  position: absolute;
  right: -30px;
  top: 50%;
}

.insurance {
  > div {
    margin-top: 10px;
  }
}

.insurance-item {
  margin-bottom: 20px;
}

.contact {
  /deep/ .el-input {
    width: 50%;
  }
}

.submit {
  margin: 50px auto;
  display: block;
  width: 250px;
  height: 50px;
}
.number {
  margin-top: 10px;
}
</style>